<template>
  <div class="dataInfo">
    <div class="top">
      <div class="left">
        <div class="item" @click="goAccess(1)">
          <div class="itemImg">
            <img
              src="@/assets/img/home/left.png"
            />
          </div>
          <div class="topName">累计分销订单</div>
          <div class="sum" :style="{ color: '#2CB9A4' }">{{ dataCounts.order_count }}</div>
        </div>
      </div>
      <div class="center_border"></div>
      <div class="right">
        <div class="item" @click="goAccess(2)">
          <div class="itemImg">
            <img src="@/assets/img/home/right.png" />
          </div>
          <div class="topName">累计兑换记录</div>
          <div class="sum" :style="{ color: '#7C7EE3' }">{{ dataCounts.exchange_count }}</div>
        </div>
      </div>
    </div>
    <!-- <div class="with_bot">
      <div class="awaitMoney">待提现佣金</div>
      <div class="money">¥200.00 ></div>
    </div> -->
    <div class="">
        <title-item title1st="待提现佣金" :subTitle="dataCounts.money"> </title-item>
      </div>
  </div>
</template>

<script setup>
import { showToast } from 'vant';
 import TitleItem from "@/components/title-item/title-item.vue";
import { useRouter } from 'vue-router'
import useMainStore from '@/stores/modules/main';
const mainStore = useMainStore()
import { storeToRefs } from 'pinia';
const { dataCounts } = storeToRefs(mainStore)
console.log(dataCounts,'mainStore')
const router = useRouter()
let localInfo = localStorage.getItem('userinfo3')
let token = localInfo ? JSON.parse(localInfo).token : ''
 const goAccess = (i)=>{
  if(!token){
    showToast('请登录后操作！')
    return;
  }
  if(i==1){
    router.push({
      path:'/cancelOrder'
    })
  }else{
    router.push({
      path:'/exchangeRecord'
    })
  }
 }
</script>

<style lang="scss">
.dataInfo {
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: relative;
  padding-bottom: 0px;

  .top {
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(151, 151, 151, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #1d1b20;
    padding: 10px;

    .center_border {
      height: 80px;
      width: 1px;
      background-color: #d9d9d9;
    }

    .right {
      // display: flex;
      // flex-direction: column;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .itemImg {
        img {
          width: 26px;
          height: 26px;
        }
        .tips {
          position: absolute;
          top: 0;
          right: -5px;
        }
      }

      .topName {
        color: #1d1b20;
		margin-top: 10px;
        font-size: 14px;
      }

      .sum {
        color: #2cb9a4;
        margin-top: 10px;
      }
    }
  }

  .with_bot {
    background: url(../../../assets/img/home/withOut.png);
    background-size: 100% 100%;
    height: 28px;
    background-repeat: no-repeat;
    margin: 20px 0;
    display: flex;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;

    .awaitMoney {
    }

    .money {
      margin-right: 60px;
    }
  }
}
</style>